<!--下拉滚动-->
<!DOCTYPE html>

<html>
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="//unpkg.com/iview/dist/styles/iview.css"/>
		<script src="//unpkg.com/vue/dist/vue.js"></script>
		<script src="//unpkg.com/iview/dist/iview.min.js"></script>	
		<title></title>
	</head>
	<body>
		<div id="app">
		    <scroll :on-reach-edge="handleReachEdge">
		        <card dis-hover v-for="(item, index) in list3" :key="index" style="margin: 32px 0">
		            Content {{ item }}
		        </card>
		    </scroll>
		</div>		
	</body>
	<script>


    var Main = {
        data () {
            return {
                list3: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
            }
        },
        methods: {
            handleReachEdge (dir) {
                return new Promise(resolve => {
                    setTimeout(() => {
                        if (dir > 0) {
                            const first = this.list3[0];
                            for (let i = 1; i < 11; i++) {
                                this.list3.unshift(first - i);
                            }
                        } else {
                            const last = this.list3[this.list3.length - 1];
                            for (let i = 1; i < 11; i++) {
                                this.list3.push(last + i);
                            }
                        }
                        resolve();
                    }, 2000);
                });
            }
        }
    }
	
	var Component = Vue.extend(Main)
	new Component().$mount('#app')
	</script>
</html>
